<template>
	<div class="app-container">
		<div v-if="user">
			<el-row :gutter="20">

				<el-col :span="8" :xs="24">
					<user-card>
						<el-card style="margin-bottom:20px;">
							<div slot="header" class="clearfix">
								<span>About me</span>
							</div>

							<div class="user-profile">
								<div class="box-center">
									<!-- <pan-thumb :image="control.controlImg" :height="'100px'" :width="'100px'" :hoverable="false">
										../assets/meeting.png
										<div>Hello</div>
										{{ control.controlName }}
									</pan-thumb> -->
									<pan-thumb :image="userInfo.staffImge" :height="'100px'" :width="'100px'" :hoverable="false">
										<div>Hello</div>
										goudan
									</pan-thumb>
								</div>
								<div class="box-center">
									<div class="user-name text-center">{{ userInfo.stafffName }}</div>
									<div class="user-role text-center text-muted">管理员</div>
								</div>
							</div>

							<div class="user-bio">
								<div class="user-education user-bio-section">
									<div class="user-bio-section-header">
										<svg-icon icon-class="education" /><span>上次登录时间：</span></div>
									<div class="user-bio-section-body">
										<br />
										<div class="text-muted">
											{{addressRes.time}}
										</div>
									</div>
									<br />
									<div class="user-bio-section-header">
										<svg-icon icon-class="education" /><span>上次登录地点：</span></div>
									<div class="user-bio-section-body">
										<br />
										<div class="text-muted">
											{{addressRes.province}}省 {{addressRes.city}}市
										</div>
									</div>
								</div>
								<br />
								<div class="user-skills user-bio-section">
									<div class="user-bio-section-header">
										<svg-icon icon-class="skill" /><span>Skills</span></div>
									<div class="user-bio-section-body">
										<div class="progress-item">
											<span>Vue</span>
											<el-progress :percentage="70" />
										</div>
										<div class="progress-item">
											<span>JavaScript</span>
											<el-progress :percentage="18" />
										</div>
										<div class="progress-item">
											<span>Css</span>
											<el-progress :percentage="12" />
										</div>
										<div class="progress-item">
											<span>ESLint</span>
											<el-progress :percentage="100" status="success" />
										</div>
									</div>
								</div>
							</div>
						</el-card>
					</user-card>
				</el-col>

				<el-col :span="16" :xs="24">
					<el-card>
						<!-- <el-tabs v-model="activeTab">
              <el-tab-pane label="Account" name="account">
                <account :user="user" />
              </el-tab-pane>
            </el-tabs> -->
						<el-form ref="userInfo" :model="userInfo" label-width="70px">
							<el-form-item label="职工编号">
								<el-input v-model="userInfo.staffNum"></el-input>
							</el-form-item>
							<el-form-item label="职工部门">
								<el-input v-model="userInfo.staffDepartment"></el-input>
							</el-form-item>
							<el-form-item label="职工姓名">
								<el-input v-model="userInfo.staffName"></el-input>
							</el-form-item>
							<el-form-item label="职工性别">
								<el-input v-model="userInfo.staffSex"></el-input>
							</el-form-item>
							<el-form-item label="职工职务">
								<el-input v-model="userInfo.staffDuty"></el-input>
							</el-form-item>
						</el-form>
						<span>
							<el-button style="display:block;margin:0 auto" type="primary" @click="updateStaff()">更 新 信 息</el-button>
						</span>


					</el-card>
				</el-col>

			</el-row>
		</div>
	</div>
</template>

<script>
	import qs from 'qs';
	import PanThumb from '../PanThumb/index.vue'
	import draggable from 'vuedraggable'
	export default {
		components: {
			PanThumb
		},
		data() {
			return {
				props: {
					user: {
						type: Object,
						default: () => {
							return {
								name: '',
								email: '',
								avatar: '',
								roles: ''
							}
						}
					}
				},
				userInfo:JSON.parse(localStorage.getItem("userInfo")),
				addressRes: {
					time: Date,
					country: "",
					province: "",
					city: ""
				},
				user: {},
				activeTab: 'activity'
			}
		},
		created() {
			this.getInfo();

		},
		methods: {
			async getInfo(){
				const { data: res } = await this.$http.post('/newlog')
				if (res.code !== 100) {
					return this.$message.error(res.message)
				}else{
					this.addressRes=res.extend.result
					console.log(this.addressRes)
				}
			},
			async updateStaff(){
				const { data: res } = await this.$http.post('/updateStaff',this.userInfo)
				if (res.code !== 100) {
					return this.$message.error(res.message)
				}else{
					localStorage.removeItem('userInfo') 
					localStorage.setItem('userInfo',JSON.stringify(this.userInfo));
					return this.$message.success("更新成功!!!")
					
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.drag-box {
		display: flex;
		user-select: none;
	}

	.drag-box-item {
		flex: 1;
		background-color: white;
		margin-right: 16px;
		border-radius: 6px;
		border: 1px #e1e4e8 solid;
	}

	.item-title {
		padding: 8px 8px 8px 12px;
		font-size: 14px;
		line-height: 1.5;
		color: #24292e;
		font-weight: 600;
	}

	.app-container {
		padding: 20px;
		background-color: white;
	}

	.box-center {
		margin: 0 auto;
		display: table;
	}

	/* .text-muted {
  color: #777;
} */

	.user-profile {
		.user-name {
			font-weight: bold;
		}

		.box-center {
			padding-top: 10px;
		}

		.user-role {
			padding-top: 10px;
			font-weight: 400;
			font-size: 14px;
		}

		.box-social {
			padding-top: 30px;

			.el-table {
				border-top: 1px solid #dfe6ec;
			}
		}

		.user-follow {
			padding-top: 20px;
		}
	}

	.user-bio {
		margin-top: 20px;
		color: #606266;

		span {
			padding-left: 4px;
		}

		.user-bio-section {
			font-size: 14px;
			padding: 15px 0;

			.user-bio-section-header {
				border-bottom: 1px solid #dfe6ec;
				padding-bottom: 10px;
				margin-bottom: 10px;
				font-weight: bold;
			}
		}
	}
</style>
